<template>
  <div >
    <div class="wrap">
      <div class="box">
        <div class="section nav">
        <picker mode="region" @change="bindRegionChange" value="region">
          <div class="picker">
            所在城市：{{region[0]}}，{{region[1]}}，{{region[2]}}
          </div>
        </picker>
          <img class="jt" src="../../../static/images/youjiantou.png" alt="" />
      </div>
        <div class="nav" @click="gerLocation">
          <div class="nav-box">
            小区/大厦/学校 ：<div class="delia" v-if="flag">{{addressa}}</div><div class="ccchoose" v-else>点击选择</div>
          </div>
          <img class="jt" src="../../../static/images/youjiantou.png" alt="" />
        </div>
        <div class="nav nav-input">
            楼号-门牌号 ：<input type="text" placeholder="例如 ：A座906室" v-model="HouseNumber"/>
          </div>
        <div class="nav nav-input">
          收货人 ：<input type="text" placeholder="请填写收货人的姓名"  v-model="name"/>
        </div>
        <div class="nav nav-input">
          联系电话 ：<input type="text" placeholder="请填写收货手机号码" v-model="phone"/>
        </div>
        <div class="nav nav-input">
          标签 ：<div :class="{lab:tag,active:index===current}" @click="handleLab(index)" v-for="(la,index) of lablist" :key="index">{{la}}</div>
        </div>
          </div>
         <div class="save">
           <button class="b-save" @click="handleSave">保存</button>
         </div>
         <div class="save" v-if="deleteflag">
            <button class="b-save" @click="handledelete" >删除</button>
         </div>
    </div>
  </div>

</template>

<script>
  // Use Vuex

  export default {

    data() {
      return {
        region: ['广东省', '广州市', '海珠区'],
        namea:{},
        addressa:'',
        flag:false,
        lablist:['家','公司','学校'],
        tag:true,
        current:'',
        HouseNumber:'',
        name:'',
        phone:'',
        addressID:'',
        deleteflag:true



      }
    },

    methods: {
      bindRegionChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.mp.detail.value)

          this.region=e.mp.detail.value

      },
      gerLocation(){

        var that=this;
        wx.chooseLocation({
          success: function (res) {
            let name= res.name;
            let address=res.address;
            that.namea=name;
            that.addressa='';
            that.addressa=address;
              that.flag=true;

          }
        })
      },
      handleLab(index){
        this.current=index;
      },
      handleSave(){
        let that=this;
        wx.request({
            url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
            method: 'post',
            data: {
              type: 'newAddress',
              userId:this.global.myID,
              userProvince: this.region,
              newAddress:this.addressa,
              userHouseNumber:this.HouseNumber,
              userName:this.name,
              userPhone:this.phone,
              guoaddressid:this.addressID,
              labertittle:this.current

            },
            header: {
              'content-type': 'application/x-www-form-urlencoded' // 默认值
            },
            success: function (res) {
              wx.navigateBack({
                delta: 1  // 返回上一级页面。
              })
            }
        })
      },
      handledelete(){
        let that=this;
        wx.request({
          url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
          method: 'post',
          data: {
            type: 'deleteAddress',
            guoaddressid:this.addressID
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          success: function (res) {
            console.log(res);
            wx.navigateBack({
              delta: 1  // 返回上一级页面。
            })
          }
        })
      }

    },
    beforeMount() {

    },
    computed:{

    },
    onLoad(options){
      var that=this;
      this.addressID=options.index;
      // console.log(options)
      if(this.addressID !== 'undefined'){

        // console.log(options.x);
        this.deleteflag=true;
        wx.request({
          url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
          method: 'post',
          data: {
            type: 'findAddress',
            useraddressid:this.addressID
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          success: function (res) {
            let add= res.data.address[0];
            that.flag=true;
            that.addressa=add.Address;
            that.HouseNumber=add.HouseNumber;
            // that.region=res.data.Province;
            that.name=add.Receiver;
            that.phone=add.Telephone;
            that.current=add.LaberTittle;
            // console.log(add);
            //
            // console.log(that.addressa);


          }
        })

      }else{
        this.deleteflag=false
      }
    }


  }
</script>

<style scoped>
  .wrap{
    width:100%;
    background-color: #fff;
  }
  .box{
    width:95%;
    margin:0 auto;
  }
  .nav{
    height: 82rpx;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc;
  }
  .jt{
    height: 40rpx;
    width:40rpx;
  }
  .delia{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:50%;
  }
  .nav-box{
    display: flex;
    width:100%;
  }
  .ccchoose{
    color: #cccccc;
  }
  .nav-input{
    justify-content: left;
  }
  .lab{
    width:90rpx;
    border:1px solid #cccccc;
    margin-right: 20rpx;
    text-align: center;
  }
  .active{
    width:90rpx;
    border:1px solid #cccccc;
    margin-right: 20rpx;
    text-align: center;
    background-color: #49B152;
    color:#ffffff;
  }
  .save{
      display: flex;

  }
  button {
    outline: none;
    border: none;
    z-index: 1;
    position: relative;
    color: white;
    background: #40a9ff;
    padding: 0.5em 1em;
  }

  button::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fa541c;
    transform-origin: center bottom;
    transform: scaleY(0);
    transition: transform 0.4s ease-in-out;
  }

  button:hover {
    cursor: pointer;
  }

  button:hover::before {
    transform-origin: center top;
    transform: scaleY(1);
  }

  .b-save{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

  }

</style>
